<template>
	<!-- 提现 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="提现" />
		<view class="main">
			<view class="maintitle">
				<view class="text">提现金额</view>
				<text @click="toDetail">提现明细</text>
			</view>
			<view class="withdrawal">
				<text>￥</text>
				<input type="number" v-model="money" placeholder="请输入提现金额" placeholder-style="font-size:24rpx;color:#666666;"/>
			</view>
			<view class="tip">
				当前可提现佣金为 {{maxMoney}} 元，<text @click="selectAll">全部提现</text>
			</view>
			<view class="title">提现到账方式</view>
			<view class="paytype">
				<view class="paytype_item" @click="payActive=1">
					<image src="/static/images/mall/paychecked.png" v-if="payActive === 1" class="paytype_item_check"></image>
					<image src="/static/images/mall/check.png" v-else class="paytype_item_check"></image>
					<image src="/static/images/mall/alipay.png" class="paytype_item_icon"></image>
					<text>支付宝</text>
				</view>
				<view class="paytype_item" @click="payActive=2">
					<image src="/static/images/mall/paychecked.png" v-if="payActive === 2" class="paytype_item_check"></image>
					<image src="/static/images/mall/check.png" v-else class="paytype_item_check"></image>
					<image src="/static/images/mall/wechat.png" class="paytype_item_icon"></image>
					<text>微信</text>
				</view>
			</view>
			<view class="pay_agreement">
				<image src="/static/images/check.png" v-if="!isConsentAgreement" @click="selectAgreement(true)"></image>
				<image src="/static/images/checked.png" v-else @click="selectAgreement(false)"></image>
				<view class="pay_agreement_text">
					我同意盲盒APP的
					<navigator url="/pages/mine/setup/userAgreement" class="nav">《用户服务协议》</navigator>
					和
					<navigator url="/pages/mine/setup/privacyPolicy" class="nav">《隐私政策》</navigator>
				</view>
			</view>
			<view class="btn" @click="submitWithdrawal">确认提现</view>
			<view class="title">提现说明</view>
			<view class="rules">
				<rich-text :nodes="withdraw_rule"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:'',//输入提现金额
				maxMoney:'',//最多可提现金额
				withdraw_rule:'',//提现说明
				payActive:1,//当前选中的支付方式 1支付宝 2微信
				isConsentAgreement: false ,//是否同意协议
				allowTap:true//防误触
			}
		},
		onLoad(options) {
			console.log("options: ",options);
			this.maxMoney = options.withdrawalAmount;
			this.getWithdrawrule();
		},
		methods: {
			//获取提现说明
			getWithdrawrule(){
				this.$api.withdrawrule().then(res=>{
					this.withdraw_rule = res;
				})
			},
			//勾选协议
			selectAgreement(e) {
				this.isConsentAgreement = e;
			},
			//提现
			submitWithdrawal(){
				if(this.money == ''){
					uni.showToast({
						title:'请输入提现金额',
						icon:'none'
					})
					return
				}
				if (this.money<=0) {
					uni.showToast({
						title:'提现金额须大于0',
						icon:'none'
					})
					return
				}
				if (this.money>Number(this.maxMoney)) {
					uni.showToast({
						title:'超过最大可提现金额，请重新输入',
						icon:'none'
					})
					return
				}
				if(!this.isConsentAgreement){
					uni.showToast({
						title:'请阅读用户协议和隐私政策并勾选',
						icon:'none'
					})
					return
				}
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				uni.showLoading({
					title:'提现中...'
				});
				this.$api.sharewithdraw({
					type:this.payActive,
					price:this.money
				}).then(res=>{
					uni.showToast({
						title:'申请提现成功'
					})
					setTimeout(()=>{
						uni.navigateBack();
					},1000)
				})
			},
			//全部提现
			selectAll(){
				if(this.maxMoney>0){
					this.money = this.maxMoney;
				}
			},
			//跳转提现明细
			toDetail(){
				uni.navigateTo({
					url:'./withdrawalDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 100rpx) 0 30rpx;
}
.main{
	width: 690rpx;
	min-height: 1076rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 5rpx 30rpx 30rpx;
	margin: 30rpx;
	
	.maintitle{
		@include between;
		margin: 50rpx 0 30rpx;
		
		.text{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF6408;
		}
	}
	.title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		margin: 50rpx 0 30rpx;
	}
	.withdrawal{
		@include align-end;
		border-bottom: 2rpx solid #A0A0A0;
		margin-top: 80rpx;
		font-size: 48rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
		line-height: 50rpx;
		
		input{
			width: 500rpx;
			margin-left: 20rpx;
		}
	}
	.tip{
		margin-top: 21rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		
		text{
			color: $main_color;
		}
	}
	.paytype{
		
		&_item{
			@include align-center;
			
			&:last-child{
				margin-top: 30rpx;
			}	
			&_check{
				width: 30rpx;
				height: 30rpx;
			}
			&_icon{
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	.pay_agreement {
		@include center;
		margin: 30rpx auto;
	
		image {
			width: 27rpx;
			height: 27rpx;
		}
	
		&_text {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 7rpx;
	
			.nav{
				color: $main_color!important;
				display: inline-block!important;
			}
		}
	}
	.btn{
		width: 560rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FF8583 0%, #FF660A 100%);
		border-radius: 35rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin: 50rpx auto;
	}
}
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 500rpx;
	height: 330rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 40rpx;
	box-sizing: border-box;
	margin-top: -100rpx;
	
	.rect_title{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		line-height: 50rpx;
		@include center;
		margin-bottom: 30rpx;
	}
	.rect_bot{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
		@include center;
		margin-top: 30rpx;
		
		text{
			color: $main_color;
		}
	}
}
</style>
